<accordion-group
  ng-init="r.isopen = true"
  is-open="r.isopen"
  class="accordion-navigation basic-needs">
  <accordion-heading class="title-wrapper">
    <h2 class="title" id="basic-needs">
      <%= t('.title') %>
      <i class="right" ng-class="{'fa fa-angle-down': true, 'open': r.isopen}"></i>
    </h2>
  </accordion-heading>
  <div class="row">
    <div ng-if="guide.basic_needs.length"
         class="columns small-12 actual-basic-needs">
      <table>
        <tbody>
          <tr ng-repeat="basicNeed in guide.basic_needs" class="basic-need"
              ng-class="{ 'medium' : basicNeed.percent >= .5 && basicNeed.percent < .75, 'high': basicNeed.percent >= .75, 'low' : basicNeed.percent < .5 }"
              ng-if="basicNeed.total && basicNeed.overlap"
              tooltip="{{ basicNeed.tooltip }}"
              >

            <!-- TODO: icons -->
            <td class="basic-need-name">
              <p class="icon {{ 'of-' + basicNeed.slug }}"><span ng-bind="basicNeed.name"></span></p>
            </td>
            <td class="basic-need-value">
              <p ng-bind="basicNeed.total"></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="small-12 columns empty"
      ng-if="guide.basic_needs.length === 0">
      <i class="fa fa-thumbs-down"></i>
      <br/>
      <%= t('.no_basic_needs_yet') %>
    </div>
  </div>

</accordion-group>

